import React, { PureComponent } from 'react'
import { connect } from 'dva'
import { Modal, Tabs } from 'antd'
import { StickyContainer, Sticky } from 'react-sticky'
import styles from './XModel.less'

const { TabPane } = Tabs

const renderTabBar = (props, DefaultTabBar) => (
  <Sticky bottomOffset={80}>
    {({ style }) => (
      <DefaultTabBar
        {...props}
        style={{
          ...style,
          zIndex: 1,
          textAlign: 'center',
        }}
      />
    )}
  </Sticky>
)

@connect(({ staffHall, loading }) => ({
  staffHall,
  loading: loading.effects['staffHall/fetchProject'],
}))
class XModel extends PureComponent {

  handleCancel = e => {
    e.preventDefault()

    const { dispatch } = this.props

    dispatch({
      type: 'staffHall/save',
      payload: {
        visible: false
      }
    })
  }

  onChange = value => {
    const { dispatch } = this.props

    dispatch({
      type: 'staffHall/fetchProfile',
      payload: { visible: true, index: Number(value) }
    })
  }

  handleRender = () => {
    const { staffHall } = this.props
    const { profile } = staffHall

    return <section className={styles.table}>
      <p className={styles.list}>
        <b>项目名称</b>
        <b>项目计划起止时间</b>
        <b>项目中止时间</b>
        <b>个人任务计划起止时间</b>
        <b>个人延期情况</b>
      </p>
      {
        profile.map((item, index) =>
          (
            <p className={styles.list} key={index}>
              <span>{item.po_name}</span>
              <span>{item.po_start} 至 {item.po_end}</span>
              <span>{item.po_finish || '进行中'}</span>
              <span>{item.ta_start} 至 {item.ta_end}</span>
              <span>{item.po_start} 至 {item.po_finish || '进行中'}</span>
            </p>
          )
        )
      }
    </section>
  }

  render() {
    const { staffHall } = this.props
    const { visible } = staffHall

    return (
      <Modal
        visible={visible}
        closable={false}
        footer={null}
        width={1200}
        onCancel={this.handleCancel}
        destroyOnClose="true"
      >
        <StickyContainer>
          <Tabs defaultActiveKey="1" renderTabBar={renderTabBar} onChange={this.onChange}>
            <TabPane tab="进行中的项目" key="1">
              {
                this.handleRender()
              }              
            </TabPane>
            <TabPane tab="已完成的项目" key="2">
              {
                this.handleRender()
              }
            </TabPane>
            <TabPane tab='已终止的项目' key="3">
              {
                this.handleRender()
              }
            </TabPane>
          </Tabs>
        </StickyContainer>
      </Modal>
    )
  }
}

export default XModel